
<!-- http://www.oschina.net/code/snippet_580949_48206 -->
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/378/6yyrqnwd/z.js"></script>
 
</head>
<body>
<center>
 
    <input type="file" id="file" />
    <img id="img" src="" /><p />
    
 
</center>
 
<script>
     
    z.plimg(z.$('file'),z.$('img'),function(file,img,url){
        // alert(url);
    });
 
</script>
 
</body>
</html>












<!-- http://crayster.iteye.com/blog/1543058 -->
<!DOCTYPE html>    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
<script type="text/javascript">  
function preImg(sourceId, targetId) {  
    if (typeof FileReader === 'undefined') {  
        alert('Your browser does not support FileReader...');  
        return;  
    }  
    var reader = new FileReader();  
  
    reader.onload = function(e) {  
        var img = document.getElementById(targetId);  
        img.src = this.result;  
    }  
    reader.readAsDataURL(document.getElementById(sourceId).files[0]);  
}  
</script>  
</head>  
<body>  
<form action="">  
    <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />  
    <img id="imgPre" src="" style="display: block;" />    
</form>  
</body>  
</html>  




// 显示本地图片
function showimg(sourceId, targetId, input_img) {  
    if (typeof FileReader === 'undefined') {  
        alert('Your browser does not support FileReader...');  
        return;  
    }  
    var reader = new FileReader();  
  
    reader.onload = function(e) {  
        var img = document.getElementById(targetId);  
        img.src = this.result;  
    }  
    reader.readAsDataURL(document.getElementById(sourceId).files[0]);
    // 修改图片后把原来的值清空,提交时判断为空则提交
    $(input_img).attr('value', '');
}

// 图片上传
function uploadfile(fileid = "file", input = "input[name=img]") {
        var formdata = new FormData();
        var file = document.getElementById(fileid).files[0];
        if (file == undefined) {
            console.log('未选择文件');
            return false;
        }
        formdata.append("file", file);
        var size = file.size;
        if (size > 10 * 1024 * 1024) {   // 判断文件大小
            console.log('文件最大上传为10M');
            return false;
        };
        $.ajax({
            type: 'POST',
            url: '/upload/upload',
            data: formdata,
            async: false, // ajax 同步
            contentType: false, // 必须false才会自动加上正确的Content-Type 
            processData: false, // 必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
            success : function(data) {
                $(input).val(data.uri);
                console.log(data.uri);
            },
            error : function(data) {  
                console.log('错误');
                console.log(data);
            }  
        });
}

/*
<div class="form-group">
    <label>活动配图</label>
    <input type="hidden" name="img" value="">
    <button type="button" class="btn btn-warning" style="margin-left:30px;" id="button">上传图片</button> <!-- 上传按钮 -->
    <input type="file" id="file"  onchange="showimg(this.id, 'img', 'input[name=img]');"  style="display:none;"/><!-- 显示本地文件 -->
    <span id="img_message"></span>
</div>
<!-- 图片显示 -->
<div class="form-group">
    <img src="{{ $news->img or '' }}" id="img" style="max-height:200px;margin-left:110px;">
</div>
                    
// 显示本地图片
$("#button").click(function(){
    $("#file").click();
});
// 提交按钮点击时保存图片
$("#sub").click(function(){
    // 修改了存储了图片时或者存储图片为空时
    if ($("input[name=img]").val() == "") {
        uploadfile();
    };
    if ($("input[name=img]").val() == "") {
        $("#img_message").html("请上传图片");
        return false;
    }
    return true;
});

*/